/*
css是什么:cascading style sheet(层叠样式表)

引入css的方法有三种：
    1.行间样式
    2.页面级css
    3.外部文件



<!-- 选择器 -->
<!-- 1.id选择器(一一对应) -->
<div id="demo"></div>


<!-- 2.css(多对多),可以多个元素对应一个css，也可以一个元素对应多个css -->
<div class="demo"></div>
<div class="demo"></div>

<!-- 一个元素对应多个css的方法就是在中间加空格 -->
<div class="demo test"></div> 

<!-- 通配符选择器可以选择标签里面的属性,例如value -->
<input type="text" value="test">



css权重
!important                Infinity
行间样式                    1000
id                          100
class | 属性 | 伪类          10
标签 | 伪元素                 1
通配符                        0

*/


/* 通配符选择器 */
*{
    list-style: none;
}



/* id选择器 */
#demo{
    width: 10px;
    height: 10px;
    background-color: green;
}



/* css选择器 */
.demo{
    width: 10px;
    height: 10px;
    background-color: green;
}


/* 标签选择器 */
div{
    width: 10px;
    height: 10px;
    background-color: green;
}


/* !important优先级最高 */
div{
    width: 10px;
    height: 10px;
    background-color: green!important;
}

/* 属性选择器 */
[value]{
    color: red;
}




/* 并列选择器(使用多个条件选择一个元素) */
/* 
    例如我要选择2变成红色
    <div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>
*/
div.demo{
    color: red;
}





/* 分组选择器 */
/* 
例如我要将下面三个都变成红色
<em>1</em>
<span>2</span>
<strong>3</strong>
*/
em,span,strong{
    color: red;
}






/* 伪元素 */

div:hover{
    background-color: red;
}


/* 在逻辑的最前的伪元素 */
div::before{
    content: "前端工程师";   /*双引号里面可以填内容,如果不需要添加内容，则在content中放个空的双引号，必须加content*/
    background-image: url(./a.jpg);
}

/* 在逻辑的最后面的伪元素 */
div::after{
    /* 清除浮动流的三件套 */
    content: "";
    display: block;
    clear: both;
    
}



